<template>
	<input type="text" class="ipt" @input="InputFn" @blur="blurFn" :class="{
		success: state === 'success',
		fail: state === 'fail' 
	}" />
</template>

<script>
	export default {
		//自定义组件的v-model
		/* 
			一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件
		<		默认的	   >	
			model: {
				prop: "value"
				event: "input"
			}
		 */


		data() {
			return {
				state: ''
			}
		},

		props: {
			//value: String,
			//要求rules传进来的必须是正则表达式
			rules: RegExp,
			msg: {
				type: String,
				default: "用户输入数据不合法！"
			}
		},
		/* 自定义组件的v-model必须调用input事件，必须回传input，以及需要双向绑定的value */
		methods: {
			InputFn(e) {
				this.$emit("input", e.target.value);
			},

			blurFn(e) {
				const nameStr = e.target.value.trim();
				if (this.rules) {
					if (this.rules.test(nameStr)) {
						this.state = 'success';
					} else {
						this.$notify({
							duration: 700,
							message: this.msg
						});
						this.state = 'fail';
					}

				}

			}
		}

	}
</script>

<style lang="less" scoped>
	.ipt {
		border: none;
		margin: none;
		padding: none;
		width: 318px;
		height: 48px;
		outline: none;
		font-size: 20px;
		border-bottom: 2px solid #999999;
		//input标签默认为行内元素，行内元素不受margin影响
		display: block;
		margin: 20px auto;
		text-align: center;
	}

	.success {
		border-bottom-color: green;
	}

	.fail {
		border-bottom-color: red;
		color: red;
	}
</style>
